<template>
	<view class="user-info">
		<view class="user">
			<view class="item">
				<view class="label"> 头像 </view>
				<view class="value" @tap="chooseImg">
					<image :src="userInfo.avatar" class="avatar" />
					<image src="/static/icon/order/right.png" class="right" />
				</view>
			</view>
			<view class="item" @tap="goSetNicName">
				<view class="label"> 昵称 </view>
				<view class="value">
					<text class="nickname"> {{userInfo.name}} </text>
					<image src="/static/icon/order/right.png" class="right" />
				</view>
			</view>
			<view class="item" @tap="goEditPhone">
				<view class="label"> 手机号 </view>
				<view class="value">
					<text>{{userInfo.mobile}}</text>
					<image src="/static/icon/order/right.png" class="right" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/store/index.js'
	import { uploadImgApi, EditUserInfoApi } from '@/service/index.js'
	import { computed } from 'vue'
	const userInfo = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo
	})
	const chooseImg = () => {
		const { token, userInfo, GETUSERINFO } = useUserStore()
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadImgApi(res.tempFilePaths[0]).then(res => {
					let params = {
						name: userInfo.name,
						avatar: res.id
					}
					EditUserInfoApi(params).then(() => {
						GETUSERINFO()
					})
				})
			}
		})
	}
	const goSetNicName = () => {
		uni.navigateTo({
			url: '/pages/setNickName/setNickName'
		})
	}
	const goEditPhone = () => {
		uni.navigateTo({
			url: '/pages/riderAndShopInfo/editPhone/editPhone?type=user'
		})
	}
</script>

<style lang="scss" scoped>
	.user-info {
		width: 100%;
		padding: 10px 12px;
		box-sizing: border-box;
		.user {
			width: 100%;
			border-radius: 10px;
			padding: 0 12px;
			background-color: #fff;
			box-sizing: border-box;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #eeeeee;
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
				.value {
					display: flex;
					align-items: center;
					.nickname {
						color: #666666;
					}
					.avatar {
						width: 36px;
						height: 36px;
						border-radius: 50%;
					}
					.right {
						width: 14px;
						height: 14px;
						margin-left: 6px;
					}
				}
			}
		}
	}
</style>